<template>
  <div class="content">
    <el-dialog :title="title" width="1180px" class="icon-dialog" top="5vh" :visible.sync="show" @open="open" :before-close="closeForm">
      <div class="data">
        <div class="query" v-if="page_data.query_field.length > 0">
          <div v-for="(item, k) in page_data.query_field" :key="k">
            <span v-if="item.type=='daterange'">
              {{ item.name }}：<el-date-picker
                size="medium"
                v-model="item.value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>&nbsp;
            </span>
          </div>
          <el-button type="primary" size="medium" @click="getDataList()">查询</el-button>
        </div>
        <el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"
                   ref="multipleTable" border class="eltable"
                  :data="list" style="width: 100%">
          <div  v-for="(item, k) in field_name" :key="k">
            <div v-if="k == 'status' || k == 'upload' || k == 'audit_role'">
              <el-table-column  :property="k"  :label="item" v-if="k == 'status'">
                <template slot-scope="scope" >
                  <el-switch active-value="1" inactive-value="0" @change="update(scope.row,'status')" v-model="scope.row.status"></el-switch>
                </template>
              </el-table-column>
              <el-table-column  :property="k"  :label="item" v-if="k == 'upload'" width="130">
                <template slot-scope="scope" >
            <span v-if="scope.row.upload.length > 0">
              <el-image :src="item1.url" v-for="(item1, k1) in scope.row.upload" :key="k1" style="width:40px;"></el-image>
            </span>
                </template>
              </el-table-column>

              <el-table-column  :property="k"  :label="item" v-if="k == 'audit_role'">
                <template slot-scope="scope" >
                  <span>{{scope.row[k].name}}</span>
                </template>
              </el-table-column>
            </div>

            <el-table-column  :property="k"  :label="item" v-else></el-table-column>
          </div>

<!--          <el-table-column label="操作" width="2">
            <template slot-scope="scope">

            </template>
          </el-table-column>-->
        </el-table>

        <div class="pagination">
          <div v-if="page_data.query_field.length > 0">
            <div v-for="(item1, key1) in page_data.query_field" :key="key1">
              <span v-if="item1.comput_field.value != ''">
                {{item1.comput_field.name}}：{{item1.comput_field.value}}{{item1.comput_field.unit}}
              </span>&nbsp;&nbsp;
            </div>
          </div>
          <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="getDataList" />
        </div>
      </div>
<!--
      <manageData :name="etc" :assoc_id="business_id"></manageData>
-->
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="closeForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/*import { getList} from '@/api/user/basic'*/
import Page from '@/components/common/Page.vue'
import manageData from './manageData.vue'
import { getDataList } from '@/api/user/basic'

export default {
  name: "dialogDataList",
  components: {Page, manageData},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    business_id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      title: '业务数据',
      loading: false,
      list: [],
      field_name: [],
      page_data: {
        page: 1,
        limit: 10,
        total: 0,
        business_id: 0,
        query_field: []
      },
    }
  },
  methods: {
    open() {
      this.page_data.business_id = this.business_id
      this.page_data.query_field = []
      this.getDataList()
    },
    getDataList() {
      getDataList(this.page_data).then(res => {
        if (res.code == 0) {
          this.page_data.mid = res.data.mid
          this.total = res.data.count
          this.list = res.data.list
          this.field_name = res.data.field_name
          this.title = '业务数据-'+res.data.business_name
          this.page_data.query_field = res.data.query_field
          this.$nextTick(() => { //调用doLayout重新渲染表格
            this.$refs['multipleTable'].doLayout();
          })
        }
      })
    },
    closeForm(){
      this.checkedId = ''
      this.$emit('update:show', false)
    },
  }
}
</script>

<style scoped>
.search_option {
  margin: 10px 0 10px 0;
}
.pagination {
  justify-content: space-between;
}
.query {
  display:flex;
}
</style>